<template>
  <view class="shoplist1">
    <!-- 返回箭头 -->
    <!-- <view class="return">
      <image src="/static/image1.png"></image>
    </view> -->
    <!-- banner图 -->
    <view class="banner">
      <uv-swiper
        :list="list"
        @change="(e) => (current2 = e.current)"
        keyName="url"
        height="400rpx"
        :autoplay="false"
        indicatorStyle="right: 20px"
      >
        <template v-slot:indicator>
          <view class="indicator-num">
            <text class="indicator-num__text"
              >{{ current2 + 1 }}/{{ list.length }}</text
            >
          </view>
        </template>
      </uv-swiper>
    </view>
    <!-- 内容 -->
    <view class="content">
      <view class="content-box1">
        <view class="box1-top">
          <view class="btop1-left">
            ￥<text class="big">439.00</text> <text class="line">￥189.00</text>
          </view>
          <view class="btop1-right">
            <image src="/static/分享.png"></image>
            <text>分享</text>
          </view>
        </view>
        <view class="box1-center1"> 送100%红包 </view>
        <view class="box1-center2">
          美孚（Mobil0）金装美孚1号 FS 0W-30 全合成机油润滑油 SL级 4L 汽车保养
        </view>
        <view class="box1-bottom">
          <view class="bbottom-left"> 库存：999 </view>
          <view class="bbottom-right"> 销量：2314 </view>
        </view>
      </view>
      <view class="content-box2">
        <view class="box2-left">
          规格<text>请选择规格</text>
        </view>
        <view class="box2-right"><image src="/static/右箭头.png"></image></view>
      </view>
      <view class="content-box3">
        <view class="bo3-top">
          商品介绍
        </view>
        <view class="box3-content">
          <image src="/static/商品介绍.png"></image>
        </view>
      </view>
    </view>
    <!-- 立即购买按钮 -->
     <view class="btn">
      <button class="btn1" @click="CfOrder1">立即购买</button>
     </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current2: 0,
      list: [
        {
          url: "https://cdn.uviewui.com/uview/resources/video.mp4",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
          poster: "/static/jiyou3.jpg",
        },
        {
          url: "/static/jiyou1.jpg",
          title: "身无彩凤双飞翼，心有灵犀一点通",
        },
        {
          url: "/static/jiyou2.jpg",
          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
        },
      ],
    };
  },
  methods: {
    CfOrder1(){
      uni.navigateTo({
         url: '/pages/CfOrder1/CfOrder1'
      });
    }
  }
};
</script>

<style lang="scss">
image {
  width: 100%;
}
.shoplist1 {
  height: 90vh;
  .return {
    image {
      width: 120rpx;
      height: 80rpx;
    }
  }
  .banner {
    position: relative;
    @mixin flex($direction: row) {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: $direction;
    }
    .indicator {
      @include flex(row);
      justify-content: center;
      &__dot {
        height: 6px;
        width: 6px;
        border-radius: 100px;
        background-color: rgba(255, 255, 255, 0.35);
        margin: 0 5px;
        transition: background-color 0.3s;
        &--active {
          background-color: #ffffff;
        }
      }
    }
    .indicator-num {
      padding: 2px 0;
      background-color: rgba(0, 0, 0, 0.35);
      border-radius: 100px;
      width: 30px;
      text-align: center;
      padding-left: 8px;
      @include flex;
      &__text {
        color: #ffffff;
        font-size: 12px;
      }
    }
  }
  .content {
    border: 1px solid #f5f5f5;
    background-color: #f5f5f5;
    .content-box1 {
      width: 90%;
      margin: auto;
      background-color: #fff;
      border-radius: 20rpx;
      // border: 1px solid red;
      margin-top: 50rpx;
      padding: 20rpx;
      .box1-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .btop1-left {
          color: #fc4323;
          .big {
            font-size: 45rpx;
          }
          .line {
            color: #8a8a8a;
            text-decoration: line-through;
            margin-left: 10rpx;
          }
        }
        .btop1-right {
          display: flex;
          align-items: center;
          color: #909090;
          image {
            width: 35rpx;
            height: 35rpx;
            margin-right: 10rpx;
          }
        }
      }
      .box1-center1 {
        background-color: #fc4424;
        width: 160rpx;
        text-align: center;
        border-radius: 10rpx;
        font-size: 24rpx;
        height: 40rpx;
        line-height: 40rpx;
        color: #fdcbc1;
        margin-top: 10rpx;
      }
      .box1-center2 {
        color: #323232;
        margin-top: 10rpx;
        letter-spacing: 3rpx;
        font-weight: bold;
      }
      .box1-bottom{
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        color: #b3b3b3;
        font-size: 28rpx;
      }
    }
    .content-box2{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      width: 90%;
      margin: auto;
      padding: 20rpx;
      // border: 1px solid red;
      border-radius: 20rpx;
      margin-top: 40rpx;
      .box2-left{
        font-weight: bold;
        text{
          color: #636363;
          margin-left: 20rpx;
          font-size: 28rpx;
          font-weight: 400;
        }
      }
      .box2-right{
        image{
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
    .content-box3{
        width: 90%;
        margin: auto;
        padding: 20rpx;
        // border: 1px solid red;
        background-color: #fff;
        border-radius: 20rpx;
        margin-top: 20rpx;
        margin-bottom: 20rpx;
        .box3-content{
          height: 1000rpx;
          margin-top: 20rpx;
          border-radius: 20rpx;
          overflow: hidden;
          image{
          height: 1000rpx;
          }
        }
    }
  }
  .btn{
    // position: sticky;
    bottom: 0;
    .btn1{
      width: 92%;
      margin: auto;
      background-color: #fc4424;
      border-radius: 50px;
      color: #fff;
      font-size: 30rpx;
    }
  }
}
</style>
